<template>
    <view class="gift-record-book">
        <view class="book-page">
            <view v-for="(item, index) in columns" :key="index" class="gift-column">
                <text class="gift-text">贺礼</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'GiftRecordBook',
    data() {
        return {
            columns: new Array(14) // 创建14列
        }
    }
}
</script>

<style scoped>
.gift-record-book {
    width: 100%;
    padding: 20rpx;
}

.book-page {
    width: 100%;
    background-color: #fff1f0;
    border: 2rpx solid #ff4d4f;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    position: relative;
}

/* 添加装饰性边角 */
.book-page::before,
.book-page::after {
    content: '';
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #ff4d4f;
}

.book-page::before {
    top: 10rpx;
    left: 10rpx;
    border-right: none;
    border-bottom: none;
}

.book-page::after {
    bottom: 10rpx;
    right: 10rpx;
    border-left: none;
    border-top: none;
}

.gift-column {
    flex: 1;
    height: 300rpx;
    border-right: 2rpx solid #ff4d4f;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20rpx;
}

.gift-column:last-child {
    border-right: none;
}

.gift-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #ff4d4f;
    font-size: 28rpx;
    font-weight: 500;
}
</style>